<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>inote 云记事</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/bar.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/forms.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/button.css" />
    <!-- 要在头部载入 -->
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/mobiscroll.custom-2.16.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/mobiscroll.custom-2.16.1.min.css" />
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #wrap{
            width: 100%;
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
        }
        #header{
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 100;
        }
        #main{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
        }
        #main{
            background-color: rgba(0,0,0,0);
            padding: 15px;
        }
        .tabActive{
            background-color: #42A5F5;
        }
        /*页面主体*/
        .con{
            padding-top: 48px;
            padding-bottom: 15px;
        }
        .mui-btn{
            height: 48px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="ino-bar home-bar">
            <div class="title">吐槽</div>
            <table class="ino-bar-content">
                <tr>
                    <td>
                        <div class="bar-tab bar-tab-back" tapmode="tabActive" onclick="api.closeWin();">
                            <img class="listTab" src="../image/png/close.png">
                        </div>                        
                    </td>
                </tr>
            </table>
        </div>
        <div id="main">
            <div class="con">
                <!-- <form> -->
                    <div class="mui-textfield">
                        <input id="email" type="email">
                        <label>您的邮箱</label>
                    </div>
                    <div class="mui-textfield">
                        <textarea id="detail"></textarea>
                        <label>吐槽</label>
                    </div>
                    
                    <input id="upload" class="mui-btn mui-btn--raised mui-btn--primary" type="submit" value="提交">
                <!-- </form> -->
            </div>
                
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
        $('#upload').click(function(){
            var $email = $('#email').val();
            var $detail = $('#detail').val();
            if (checkMail($email)) {
                if ($detail != "") {
                    // 将数据提交至服务器
                    updateDate($email, $detail);
                }else{
                    openToast('请吐槽一下吧');
                }
            }else{
                openToast('您的电子邮件格式不正确');
            }
        });
            
    };
    function checkMail(mail) {
        var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (filter.test(mail)){
            return true;
        }else{
            return false;
        }
    };
    function openToast(msg) {
        api.toast({
            msg: msg,
            duration: 1500,
            location: 'bottom'
        });
    };
    function updateDate(email, detail) {
        var model = api.require('model');
        model.config({
            appKey: '959C7817-5EC9-8CC3-BB39-3FB2441E5C91',
            host: 'https://d.apicloud.com'
        });
        model.insert({
            class: 'detail',
            value: {
                email: email,
                detail: detail
            }
        }, function(ret, err){
            if(ret){
                openToast('有您的反馈，i记事会越来越好，谢谢');   
            }else{
                openToast('貌似出问题了呢'); 
            }
        });
    };
</script>
</html>